<template>
	<view class="select-city" @click="handleOpenCitySelect" :style="{color: color}">
		<text class="label">{{ label || "请选择城市" }}</text>
		<uni-icons type="down" :color="color"></uni-icons>
		<unicloud-city-select
			ref="citySelectRef"
			:hot-city="hotCity"
			:location="true"
			@select="handleCitySelect"
		></unicloud-city-select>
	</view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
	label: String,
  color: {
    type: String,
    default: "#FFFFFF"
  }
});

const hotCity = [
	{ code: 460100, name: "海口" },
	{ code: 460200, name: "三亚" },
	{ code: 460400, name: "儋州" }
];

const emits = defineEmits(["open", "select"]);

const citySelectRef = ref();

const handleOpenCitySelect = () => {
	citySelectRef.value.open();
	emits("open");
};

const handleCitySelect = (cityInfo) => {
	emits("select", cityInfo);
};
</script>

<style lang="scss" scoped>
.select-city {
	.label {
		margin-right: 5px;
	}
}
</style>
